<template>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">Login</div>
            <div class="form-wrapper">
                <form>
                    <input type="text" name="username" placeholder="username/email" id="usrn" class="input-item"
                        v-model="identifier">
                    <input type="password" name="password" placeholder="password" id="mima" class="input-item"
                        v-model="userpassword">
                </form>
                <div class="btn" @click="userLogin">登录</div>
                <p>Not with us.Click here to <router-link to="signup">sign up</router-link></p>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref } from "vue"
import { useStore } from "vuex"
import { useRouter } from 'vue-router'

const store = useStore()
const identifier = ref('')
const userpassword = ref('')

const router = useRouter()
const userLogin = async () => {
    try {
         await store.dispatch("getuserlogin", {
            identifier: identifier.value,
            password: userpassword.value
        });
        router.push('/');
    } catch (error) {
        alert(error.message);
    }

}


</script>
<style lang="less">
@import "../style/login.less";
</style>
  